<template>
  <div class="ing">
    <div>
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                <!-- 跳转路由并携带query参数,to的字符串写法 -->
            <!-- <router-link :to="`/Bao/ing/mess?id=${item.id}&name=${item.name}`">{{item.name}}</router-link> -->
            <!-- 跳转路由并携带query参数,to的对象写法 -->
             <router-link :to="{
                path:'/Bao/ing/mess',
                query:{
                    id:item.id,
                    name:item.name
                }
             }">
                {{item.name}}
            </router-link>

            </li>
        </ul>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                { id: '001', name:'饺子'},
                { id: '002', name: '三明治'},
                { id: '003', name: '香菜'},
            ]
        }
    }
}
</script>

<style>

</style>